<!-- 检票员端 我的 -->
<template>
  <div class="container">
    <div class="userInfo">
      <div class="avatar1">
        <div class="avatar2">
          <img class="avatar3" src="@/assets/images/inspector/pic_touxiang.png" />
        </div>
      </div>
      <div class="userName">{{ dataObj.name || '未登录' }}</div>
      <img mode="widthFix" src="@/assets/images/inspector/pensonal_bg.png" />
    </div>
    <div class="infoManagement" v-for="(item, i) in navList" :key="i" @click="onNavTo(item.url, item.label)">
      <div class="li-wrap">
        <!-- <i class="iconfont {{item.icon}}" style="color: {{item.color}};"></i> -->
        <div class="text-wrap">
          <span class="label">{{ item.label }}</span>
        </div>
        <van-icon name="arrow" size="18px" />
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant';


export default {
  name: '',
  components: {
    
  },
  computed: {
    
  },
  data() {
    return {
      navList: [
        { url: '/cbusvideo', label: '上车后小视频', },
        { url: '/cbusvideo', label: '下车后小视频', },
        { url: 'logout', label: '退出登录', },
        // { url: '', label: '学生名单', },
      ],
      dataObj: {
        name: '小王',
      },
    }
  },
  methods: {
    onNavTo(url, key) {
      if(url === 'logout') {
        Dialog.confirm({
          title: '确认退出？',
          message: '是否确认退出登录？',
        }).then(() => {
          // on confirm
          this.dataObj = {}
          Toast('您已退出登录')
        }).catch(() => {
          // on cancel
        })
        return
      }
      if(url === '/cbusvideo') {
        localStorage.setItem('videoTitle', key)
      }
      this.$router.push(url)
    }
  },
}
</script>

<style scoped lang="less">
.container {
  height: 100vh;

  >.userInfo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: #00a2ff;
    background: rgb(40, 130, 254);
  
    >img {
      position: absolute;
      bottom: -12px;
      width: 100%;
    }

    >.avatar1 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 83px;
      height: 83px;
      margin-bottom: 7px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);

      >.avatar2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.24);

        >.avatar3 {
          width: 65px;
          border-radius: 50%;
        }
      }
      
    }

    >.userName {
      margin-top: 5px;
      font-size: 16px;
      color: #ffffff;

      >.state {
        margin-left: 4px;
        padding: 3px 6px;
        border-radius: 2px;
        font-size: 12px;
      }
    }
  }

  >.infoManagement {
    background: #ffffff;

    >.li-wrap {
      display: flex;
      align-items: center;
      height: 57px;
      padding: 0 22px;

      >img {
        width: 22px;
        height: 22px;
        margin-right: 8px;
      }
      >.iconfont {
        transform: translateY(2rpx);
        display: flex;
        justify-content: flex-start;
        width: 68rpx;
        font-size: 22px;
      }

      >.text-wrap {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        border-bottom: 1px solid #e5e5e5;

        >img {
          width: 8px;
        }

        >.label {
          font-size: 14px;
          color: #2a2a2a;
        }


      }
      

      // &:nth-child(1) >.iconfont {
      //   color: #00a2ff;
      // }
      // &:nth-child(2) >.iconfont {
      //   color: #45C861;
      // }
      // &:nth-child(3) >.iconfont {
      //   color: #ff919e;
      // }
      // &:nth-child(4) >.iconfont {
      //   color: #00c1d0;
      // }
      // &:nth-child(5) >.iconfont {
      //   color: #4095E5;
      // }
    }
  }
}


</style>
